<template>
    <div>
      <mychild3/>
      <mychild2></mychild2>



      <my-input :value='name' @input='name=$event'/>
      <my-input v-model='name'/>


      <mychild1 :title='name' @update:title='fn2'/>
      <mychild1 :title='name' @update:title='name=$event'/>
      <mychild1 :title.sync='name'/>
      <mychild1 :title2.sync='name'/>



        day4
        <myh1 v-for='item in ary' :title="item" :name='123' :key="item" @click='fn' >
          <div slot='title1' slot-scope="qqq">呵呵1{{qqq}}</div>
          <div slot='title1'>呵呵2</div>
          <div slot='title1'>呵呵3</div>
          <div slot='title1'>呵呵4</div>
          <!-- <template v-slot:title1='qqq'>
            <!-- qqq 代表的就是 slot上的所有行内属性
            <div >hehe</div>
            <div>hehe2{{qqq}}</div>
          </template> -->
          <!-- v-slot='qqq'  其实就是 v-slot:default='qqq' -->
          


          
          <!-- <template #content1>
            <div>内容部分1</div>
            <div>内容部分2</div>
          </template> -->
          
        </myh1>
        <ul v-once>
          <li v-for='i in  arr'>{{i.text}}</li>
        </ul>
    </div>
</template>
<script>
// @ is an alias to /src
import myh1 from './components/h1'
import mychild1 from './components/child1'
import myInput from './components/input'
import mychild2 from './components/self_derective'
import mychild3 from './components/动态组件'
console.log(myh1)
export default {
    name: 'XXX',
    data() {
        return {
          name:"珠峰",
          ary:['css','html','js'],
          arr:[]
        }
    },
    methods: {
      fn(val){
        console.log(arguments)// 实参 都是子组件给的数据
        this.ary.push(val)
      },
      fn2(val){
        console.log(arguments)
        this.name = val
      },
      fn3(val){
        console.log(arguments)
        this.name = val
      }
    },
    created() {
      // console.log(this.arr)
      setTimeout(() => {
        var data = [{text:'123133'},{text:'123133'},{text:'123133'},{text:'123133'},{text:'123133'}];
        this.arr = Object.freeze(data)
      }, 1000);
    },
    components: {
        myh1,mychild1,
        "my-input":myInput,
        mychild2,mychild3
    }
}
</script>
<style lang="less">

</style>